<template>
	<view class="container">
		<view class="mids boxS">
			<view class="mt-20">
				<view class="headers">购车合同</view>
				<view class="h-two">
					<view class="h-item">1.合同内容可按需求修改。</view>
					<view class="h-item">2.买卖双方发起合同时，买卖双方均需冻结定金到平台。</view>
					<view class="h-item">3.买卖双方发起合同后，需等待对方定金冻结到平台。</view>
					<view class="h-item">4.冻结了定金的合同在买卖双方同意后自动生效。</view>
				</view>
			</view>
			<view class="sell">
				<view class="mid-item">
					<view class="mid-left" style="width: 300rpx;">
						<i-icon icon="iconmaifangxinxi" type="single" class="mr-5 middle" size="36rpx" color="#666"></i-icon>
						<text class="inform">买方信息</text>
					</view>
					<view class="mid-right"></view>
				</view>
				<view class="titleName colorE" :style="(dealMsg.buyers && dealMsg.buyers.store_Name) || dealMsg.buyerstorename ?'line-height:54rpx':'line-height:108rpx'">
					<view class="font-30 color-333" v-if="(dealMsg.buyers && dealMsg.buyers.store_Name)|| dealMsg.buyerstorename">
						{{ dealMsg.goInPage === 'index' ? dealMsg.buyers.store_Name : dealMsg.buyerstorename }}
						<i-icon icon="iconbao_1" type="single" class="ml-5 middle" size="32rpx" color="#FBB000"></i-icon>
					</view>
					<view class="font-30 color-333" v-else>
						{{ dealMsg.goInPage === 'index' ? dealMsg.buyers.companyName : dealMsg.buyercompanyname }}
						<i-icon icon="iconbao_1" type="single" class="ml-5 middle" size="32rpx" color="#FBB000"></i-icon>
					</view>
					<view class="font-24 color-666" v-if="(dealMsg.buyers && dealMsg.buyers.store_Name) || dealMsg.buyerstorename">{{ dealMsg.goInPage === 'index' ? dealMsg.buyers.companyName : dealMsg.buyercompanyname }}</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">联系人</view>
					<view class="noInp text-line">{{ dealMsg.goInPage === 'index' ? dealMsg.buyers.trueName : dealMsg.buyertruename }}</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">联系电话</view>
					<view class="noInp text-line">{{ dealMsg.goInPage === 'index' ? dealMsg.buyers.mobile : dealMsg.buyermobile }}</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">联系地址</view>
					<view class="noInp" :style="addressBuyers().length>15?'line-height:54rpx;text-align:left':'line-height:108rpx'">{{addressBuyers()}}</view>
				</view>
				<!-- <view class="mid-item colorE">
					<view class="mid-left">备注</view>
					<view class="mid-right text-line font-24 color-EB5B01" style="line-height: 108rpx;">{{ dealMsg.goInPage === 'index' ? dealMsg.buyers.address : dealMsg.buyeraddress }}</view>
				</view> -->
			</view>
			<view class="buy">
				<view class="mid-item">
					<view class="mid-left" style="width: 300rpx;">
						<i-icon icon="iconmaifangxinxi" type="single" class="mr-5 middle" size="36rpx" color="#666"></i-icon>
						<text class="inform">卖方信息</text>
					</view>
					<view class="mid-right"></view>
				</view>
				<view class="titleName colorE" :style="(dealMsg.seller && dealMsg.seller.store_Name) || dealMsg.sellerstorename ?'line-height:54rpx':'line-height:108rpx'">
					<view class="font-30 color-333" v-if="(dealMsg.seller && dealMsg.seller.store_Name) || dealMsg.sellerstorename">
						{{ dealMsg.goInPage === 'index' ? dealMsg.seller.store_Name : dealMsg.sellerstorename }}
						<i-icon icon="iconbao_1" type="single" class="ml-5 middle" size="32rpx" color="#000"></i-icon>
					</view>
					<view class="font-30 color-333" v-else>
						{{ dealMsg.goInPage === 'index' ? dealMsg.seller.companyName : dealMsg.sellercompanyname }}
						<i-icon icon="iconbao_1" type="single" class="ml-5 middle" size="32rpx" color="#000"></i-icon>
					</view>
					<view class="font-24 color-666" v-if="(dealMsg.seller && dealMsg.seller.store_Name) || dealMsg.sellerstorename">{{ dealMsg.goInPage === 'index' ? dealMsg.seller.companyName : dealMsg.sellercompanyname }}</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">联系人</view>
					<view class="noInp text-line">{{ dealMsg.goInPage === 'index' ? dealMsg.seller.trueName : dealMsg.sellertruename }}</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">联系电话</view>
					<view class="noInp text-line">{{ dealMsg.goInPage === 'index' ? dealMsg.seller.mobile : dealMsg.sellermobile }}</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">联系地址</view>
					<view class="noInp " :style="addressSeller().length>15?'line-height:54rpx;text-align:left':'line-height:108rpx'">{{addressSeller()}}</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">备注</view>
					<view class="noInp " :style="addressSeller().length>15?'line-height:54rpx;text-align:left':'line-height:108rpx'">{{dealMsg.remarks}}</view>
				</view>
			</view>
			<view class="car">
				<view class="mid-item">
					<view class="mid-left " style="width: 100%;">
						<i-icon icon="iconcheliangxinxi" type="single" class="mr-5 middle" size="36rpx" color="#666"></i-icon>
						<text class="inform">交易车辆信息</text>
					</view>
					<view class="mid-right"></view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">车型款式</view>
					<view class="noInp text-line">
						{{ dealMsg.goInPage === 'index' ? dealMsg.carMsg.series.carTypeName : dealMsg.carname }}{{ dealMsg.goInPage === 'index' ? dealMsg.carMsg.configulist.name : '' }}
					</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">外观/内饰</view>
					<view class="noInp text-line">
						<view v-if="JSON.stringify(dealMsg) !== '{}'">
							<view :style="{ background: dealMsg.color.outerColour.colorCoding }" class="iconcolor"></view>
							{{ dealMsg.color.outerColour.color }} /{{ dealMsg.color.inColour.color }}
							<view v-if="dealMsg.color.inColour.neiColor.length == 1" :style="{ background: dealMsg.color.inColour.colorCoding }" class="iconcolor"></view>
							<view v-else class="iconcolor"><view class="iconcolor2" v-for="(it, i) in dealMsg.color.inColour.neiColor" :key="i" :style="{ background: it }"></view></view>
						</view>
					</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">指导价格</view>
					<view class="noInp text-line">{{ dealMsg.goInPage === 'index' ? dealMsg.carMsg.configulist.factoryprice : dealMsg.guideprice }}</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">车辆销售价</view>
					<view class="mid-right text-line">
						<view class="inpWrap">
							<input type="number" @blur="getSellingPrice" placeholder-class="font-999 font-26" placeholder="请填入双方最终约定的成交价" :value="sellingPrice" />
						</view>
						<view class="iconWrap">
							<text>万</text>
							<u-icon name="arrow-right" class="ml-5" color="#9A9A9A" size="24rpx"></u-icon>
						</view>
					</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">定金金额</view>
					<view class="mid-right text-line">
						<view class="inpWrap"><input type="number" placeholder-class="font-999 font-26" placeholder="定金不低于800元" @blur="getDepositAmount" :value="depositAmount" /></view>
						<view class="iconWrap">
							<text>元</text>
							<u-icon name="arrow-right" class="ml-5" color="#9A9A9A" size="24rpx"></u-icon>
						</view>
					</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">生产日期</view>
					<view v-if="dealMsg.goInPage === 'index'" class="noInp text-line" @click="proTimeshow = true">
						{{proTime?proTime:'请选择' }}
						<u-icon name="arrow-right" class="ml-5" color="#9A9A9A" size="24rpx"></u-icon>
					</view>
					<view v-else class="noInp text-line">{{ dealMsg.produceddate }}</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">车辆合格证</view>
					<view class="noInp text-line" v-if="dealMsg.goInPage === 'index'" @click="certificateshow=true">{{certificate?certificate:'请选择'}}<u-icon name="arrow-right" class="ml-5" color="#9A9A9A" size="24rpx"></u-icon></view>
				  <view class="noInp text-line" v-else>{{ dealMsg.qualifiedName }}</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">车辆详情</view>
				
					<view class="noInp text-line" v-if="dealMsg.goInPage === 'index'" @click="cardetailshow=true">{{cardetails.label?cardetails.label:'请选择' }}<u-icon name="arrow-right" class="ml-5" color="#9A9A9A" size="24rpx"></u-icon></view>
					<view class="noInp text-line" v-else>{{ dealMsg.cardetailsName }}</view>
				</view>
				<view class="mid-item colorE">
					<view class="mid-left">交车日期</view>
					<view class="noInp text-line" @click="ransfertCar = true">
						<text v-if="JSON.stringify(deliverydate) !== '{}'">{{ deliverydate.label }}</text>
						<text v-else>请选择</text>
						<u-icon name="arrow-right" class="ml-5" color="#9A9A9A" size="24rpx"></u-icon>
					</view>
				</view>
			</view>
			<view class="mt-20 orderDetail">
				<view class="border-bottom-1 title">备注（非必填）</view>
				<view class="pad-t-b-10"><textarea v-model="remarks" @blur="textareablue" class="font-30 color-999 minHeight150" placeholder="请输入其他约定内容" /></view>
			</view>

			<view class="mt-20 agreement-wrap">
				<u-checkbox @change="checkboxChange" class="agreement" shape="circle" size="32" active-color="#FBB000" v-model="agree">
					<view class="font-26">
						<text>我已阅读并同意</text>
						<text class="color-FBB000" @click="gonext('/pages_common/payFlies/transactionAgreement')">《平台交易协议》</text>
					</view>
					<view class="font-26">
						<text>交易规则详情请参考</text>
						<text class="color-FBB000" @click="gonext('/pages_common/payFlies/transactionDescription')">《交易说明》</text>
					</view>
				</u-checkbox>
			</view>
		</view>
		<view class="fixedBottomBtn"><button class="sureBtn" v-if="agree" @click="show = true">确认合同</button>
		<button class="sureBtn bgFFF6CE" v-else @click="readDealFile">确认合同</button></view>
		<!-- 确认弹框 -->
		<u-popup v-model="show" :mode="mode" border-radius="14" width="540rpx" height="358rpx">
			<view class="popup-title">温馨提示</view>
			<view class="popup-content"> {{maiState===1?'确认和卖家沟通并购买此车源？':'确认和买家沟通并出售此车源？'}}</view>
			<view class="btnWrap flex">
				<view class="width-50 left" @click="show = false"><view class="inline-block">取消</view></view>

				<view class="width-50 right" @click="$u.throttle(initiatingContract, 3000)">发起交易</view>
			</view>
		</u-popup>
		<u-popup v-model="ransfertCar" class="ransfertCar" mode="bottom" border-radius="25" width="100%" height="540rpx">
			<view class="title">交车日期</view>
			<view class="list" v-for="(it, index) in carDateList" :key="index" @click="selectRansferCarDate(it)">{{ it.label }}</view>
			<view class="bottom">注：交车日期在合同生效后开始计算</view>
		</u-popup>
		<!-- 生产日期 -->
		<!-- <u-picker mode="time" v-model="proTimeshow" @confirm="selectProTime"></u-picker> -->
		<changeTime title="选择生产日期"  :showsc="proTimeshow" @confirmTime="selectProTime" @closeTime="proTimeshow=false"></changeTime>
		<!-- 车辆合格证 -->
		<u-popup v-model="certificateshow" class="ransfertCar" mode="bottom" border-radius="25" width="100%" height="540rpx">
			<view class="title">车辆合格证</view>
			<view class="list" v-for="(it, index) in certificateList" :key="index" @click="selectCertificate(it)">{{ it.label }}</view>
		</u-popup>
		<!-- 手续 -->
	<!-- <formalitles :status="formalitiesStatus" :id='formalitiesValue.value' @getFormalties="getFormalties"></formalitles> -->
	<!-- 选择车辆详情-->
	<!-- {{cardetailshow}} -->
	<carDetail :status="cardetailshow" :id='cardetails.value' @close='cardetailshow=false' @getCarDetail="selectCardetail"></carDetail>
	
	</view>
</template>

<script src="./initiatingContract.js"></script>

<style src="./initiatingContract.scss" lang="scss" scoped></style>
